<template>
  <view class="vertical-scroll-text flex items-center">
    <view class="horn-box">
      <text class="dyicon icon-laba horn-icon"></text>
    </view>
    <view class="list">
      <view
        class="child"
        v-for="(item, index) in list"
        :key="item.id"
        :class="!index && play && isStart ? 'toUp' : ''"
        v-html="item.msg"
        @click="clickItem(item, index)"
      >
      </view>
    </view>
  </view>
</template>

<script>
  import * as Utils from '@/utils/index.js';
  export default {
    name: 'VerticalScrollText',

    props: {
      list: {
        type: Array,
        default: () => [],
        require: true,
      },
    },

    data() {
      return {
        timer: null,
        play: true,
        isStart: false,
      };
    },

    mounted() {
      this.timer = setInterval(this.startPlay, 4000);
    },

    unmounted() {
      clearInterval(this.timer);
      this.timer = null;
    },

    methods: {
      startPlay() {
        let that = this;
        if (this.list.length <= 1) {
          clearInterval(this.timer);
          return;
        }
        that.play = true; //开始播放
        that.isStart = true; // 避免css样式初始化时把第一条信息移走
        const setTimer = setTimeout(() => {
          that.list.push(that.list[0]); //将第一条数据塞到最后一个
          that.list.shift(); //删除第一条数据
          that.play = false; //暂停播放,此处修改，保证每一次都会有动画显示。 一定要修改属性，只有修改属性这样才能触发控件刷新冲毁!!!!
        }, 1000);
      },

      //只要对第一行进行滚动，下面的自动会跟着往上移动。
      isScroll(index) {
        if (index == 0) {
          return true;
        } else {
          return false;
        }
      },

      clickItem(item, index) {
        if (!item.url) return;
        item.isBack ? h5uni.switchTab({ url: item.url }) : this.navTo(item.url);
      },
      navTo(url) {
        if (!url) return;
        const re = Utils.regular.urlReg();

        if (re.test(url)) {
          // 外部网址
          console.log('外部网址');
          h5uni.navigateTo({
            url: `/pages/webview/index?url=${url}`,
          });
        } else {
          // 内部网址
          console.log('内部网址');
          // Utils.pageTo.navigateTo(url)
          Utils.pageTo.h5uniNavTo(url);
        }
      },
    },
  };
</script>

<style lang="scss" scoped>
  .vertical-scroll-text {
    width: 100%;
    height: 100%;
    background-color: #fff;
    color: #000;
    padding: 0 25px;
    border-radius: 12px;
    box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.25);
    overflow: hidden;
  }

  .horn-box {
    vertical-align: middle;
    margin-right: 15px;
    height: 40px;
    display: flex;
    align-items: center;
    // transform: translateY(1px);
    .horn-icon {
      font-size: 23px;
    }
  }

  .list {
    flex: 1;
    list-style: none;
    width: 100%;
    height: 100%;
    text-align: center;
  }

  .child {
    display: flex;
    align-items: center;
    text-align: left; /**覆盖外层设置的水平居中效果**/
    height: 40px;
    line-height: 19px; /**span 垂直居中需要这一句**/
    font-size: 12px;
    // text-decoration: underline;
    // transform: translateY(1px);
  }

  .toUp {
    margin-top: -40px; //向上移
    transition: all 0.5s;
  }
</style>
